$maxBoxShadowSize: 128px;
$originalBoxShadowSize: 8vw;
$boxShadowSize: min($originalBoxShadowSize, $maxBoxShadowSize);

$maxBorderSize: 4.8px;
$originalBorderSize: 0.3vw;
$borderSize: min($originalBorderSize, $maxBorderSize);

@keyframes skull {
  0% {
    top: 44.2%;
    left: 5%;
    opacity: 0.1;
    transform: scale(0.3);
  }

  40% {
    top: 43.9%;
    left: 45.2%;
    opacity: 1;
    transform: scale(1);
  }

  43% {
    top: 30%;
    left: 47%;
  }

  46% {
    top: 56.5%;
    left: 48.5%;
  }

  49% {
    top: 43.8%;
    left: 49.7%;
  }

  53% {
    top: 43.5%;
    left: 56%;
  }

  57% {
    top: 14.3%;
    left: 57.9%;
  }

  61% {
    top: 82.5%;
    left: 59%;
  }

  65% {
    top: 44%;
    left: 61.2%;
    opacity: 1;
    transform: scale(1);
  }

  100% {
    top: 44%;
    left: 95%;
    opacity: 0.1;
    transform: scale(0.3);
  }
}

.heartrate {
  position: relative;
  display: block;
  background-image: url('../../images/mainpage/pulse.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 33vw;
  max-height: 528px;
  z-index: 1;

  &__skull {
    left: 5vw;
    background-image: url('../../images/mainpage/skull.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: rgba(184, 10, 10, 0.85);
    outline: $borderSize double rgb(184, 10, 10);
    max-width: 30px;
    max-height: 30px;
    width: 1.875vw;
    height: 1.875vw;
    position: absolute;
    animation: skull 7s infinite;
    box-shadow: 0 0 150px $boxShadowSize rgb(184, 10, 10);
    border-radius: 25px;

    @media (min-width: 600px) and (max-width: 1000px) {
      background-color: rgba(184, 10, 10, 0.7);
      outline: 0.5vw double rgb(184, 10, 10);
    }

    @media (min-width: 335px) and (max-width: 599px) {
      background-color: rgba(184, 10, 10, 0.65);
    }

    @media (max-width: 334px) {
      background-color: rgba(184, 10, 10, 0.55);
    }
  }
}
